<template>
  <div>
  <el-tabs type="border-card">
    <el-tab-pane label="秒" v-if="shouldHide('second')">
    <CrontabSecond
      @update="updateCrontabValue"
      :check="checkNumber"
      :cron="crontabValueObj"
      ref="cronsecond"
    />
    </el-tab-pane>
    <el-tab-pane label="分钟" v-if="shouldHide('min')">
    <CrontabMin
      @update="updateCrontabValue"
      :check="checkNumber"
      :cron="crontabValueObj"
      ref="cronmin"
    />
    </el-tab-pane>
    <el-tab-pane label="小时" v-if="shouldHide('hour')">
    <CrontabHour
      @update="updateCrontabValue"
      :check="checkNumber"
      :cron="crontabValueObj"
      ref="cronhour"
    />
    </el-tab-pane>
    <el-tab-pane label="日" v-if="shouldHide('day')">
    <CrontabDay
      @update="updateCrontabValue"
      :check="checkNumber"
      :cron="crontabValueObj"
      ref="cronday"
    />
    </el-tab-pane>
    <el-tab-pane label="月" v-if="shouldHide('month')">
    <CrontabMonth
      @update="updateCrontabValue"
      :check="checkNumber"
      :cron="crontabValueObj"
      ref="cronmonth"
    />
    </el-tab-pane>
    <el-tab-pane label="周" v-if="shouldHide('week')">
    <CrontabWeek
      @update="updateCrontabValue"
      :check="checkNumber"
      :cron="crontabValueObj"
      ref="cronweek"
    />
    </el-tab-pane>
    <el-tab-pane label="年" v-if="shouldHide('year')">
    <CrontabYear
      @update="updateCrontabValue"
      :check="checkNumber"
      :cron="crontabValueObj"
      ref="cronyear"
    />
    </el-tab-pane>
  </el-tabs>
  <div class="popup-main">
    <div class="popup-result">
    <p class="title">时间表达式</p>
    <table>
      <thead>
      <th v-for="item of tabTitles" width="40" :key="item">{{item}}</th>
      <th>Cron 表达式</th>
      </thead>
      <tbody>
      <tr>
        <td v-for="(value, key) in crontabValueObj" :key="key">
        <span>{{ value }}</span>
        </td>
        <td>
        <span>{{ crontabValueString }}</span>
        </td>
      </tr>
      </tbody>
    </table>
    </div>
    <CrontabResult :ex="crontabValueString"></CrontabResult>
    <div class="pop_btn">
    <el-button size="small" type="primary" @click="submitFill">确定</el-button>
    <el-button size="small" type="warning" @click="clearCron">重置</el-button>
    <el-button size="small" @click="hidePopup">取消</el-button>
    </div>
  </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import CrontabSecond from "./second.vue";
import CrontabMin from "./min.vue";
import CrontabHour from "./hour.vue";
import CrontabDay from "./day.vue";
import CrontabMonth from "./month.vue";
import CrontabWeek from "./week.vue";
import CrontabYear from "./year.vue";
import CrontabResult from "./result.vue";

export default {
  name: "vcrontab",
  props: ["expression", "hideComponent"],
  setup(props) {
  const tabTitles = ["秒", "分钟", "小时", "日", "月", "周", "年"];
  const tabActive = ref(0);
  const crontabValueObj = ref({
    second: "*",
    min: "*",
    hour: "*",
    day: "*",
    month: "*",
    week: "?",
    year: "",
  });

  const shouldHide = (key) => {
    if (props.hideComponent && props.hideComponent.includes(key)) {
    return false;
    }
    return true;
  };

  const resolveExp = () => {
    if (props.expression) {
    const arr = props.expression.split(" ");
    if (arr.length >= 6) {
      const obj = {
      second: arr[0],
      min: arr[1],
      hour: arr[2],
      day: arr[3],
      month: arr[4],
      week: arr[5],
      year: arr[6] ? arr[6] : "",
      };
      crontabValueObj.value = {
      ...obj
      };
      for (let i in obj) {
      if (obj[i]) {
        changeRadio(i, obj[i]);
      }
      }
    }
    } else {
    clearCron();
    }
  };

  const updateCrontabValue = (name, value, from) => {
    crontabValueObj.value[name] = value;
    if (from && from !== name) {
    console.log(`来自组件 ${from} 改变了 ${name} ${value}`);
    changeRadio(name, value);
    }
  };

  const changeRadio = (name, value) => {
    const refName = "cron" + name;
    const ref = refs[refName];
    if (!ref) return;
    if (Array.isArray(value)) {
    ref.radioValue = 4;
    ref.checkboxList = value;
    } else {
    switch (value) {
      case "*":
      ref.radioValue = 1;
      break;
      case "?":
      ref.radioValue = 2;
      break;
      case "L":
      ref.radioValue = name === "day" ? 6 : 5;
      break;
      default:
      if (value.includes("-")) {
        const [start, end] = value.split("-");
        ref.cycle01 = start;
        ref.cycle02 = end;
        ref.radioValue = 2;
      } else if (value.includes("/")) {
        const [start, step] = value.split("/");
        ref.average01 = start;
        ref.average02 = step;
        ref.radioValue = 3;
      }
      break;
    }
    }
  };

  const checkNumber = (value, minLimit, maxLimit) => {
    value = Math.floor(value);
    if (value < minLimit) {
    value = minLimit;
    } else if (value > maxLimit) {
    value = maxLimit;
    }
    return value;
  };

  const submitFill = () => {
    const crontabValueString = crontabValueObj.value;
    props.$emit("fill", crontabValueString);
    hidePopup();
  };

  const clearCron = () => {
    crontabValueObj.value = {
    second: "*",
    min: "*",
    hour: "*",
    day: "*",
    month: "*",
    week: "?",
    year: "",
    };
    for (let j in crontabValueObj.value) {
    changeRadio(j, crontabValueObj.value[j]);
    }
  };

  const hidePopup = () => {
    props.$emit("hide");
  };

  watch(props.expression, resolveExp);

  return {
    tabTitles,
    tabActive,
    crontabValueObj,
    shouldHide,
    updateCrontabValue,
    checkNumber,
    submitFill,
    clearCron,
    hidePopup
  };
  },
  components: {
  CrontabSecond,
  CrontabMin,
  CrontabHour,
  CrontabDay,
  CrontabMonth,
  CrontabWeek,
  CrontabYear,
  CrontabResult
  }
};
</script>
<style scoped>
.pop_btn {
  text-align: center;
  margin-top: 20px;
}
.popup-main {
  position: relative;
  margin: 10px auto;
  background: #fff;
  border-radius: 5px;
  font-size: 12px;
  overflow: hidden;
}
.popup-title {
  overflow: hidden;
  line-height: 34px;
  padding-top: 6px;
  background: #f2f2f2;
}
.popup-result {
  box-sizing: border-box;
  line-height: 24px;
  margin: 25px auto;
  padding: 15px 10px 10px;
  border: 1px solid #ccc;
  position: relative;
}
.popup-result .title {
  position: absolute;
  top: -28px;
  left: 50%;
  width: 140px;
  font-size: 14px;
  margin-left: -70px;
  text-align: center;
  line-height: 30px;
  background: #fff;
}
.popup-result table {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}
.popup-result table span {
  display: block;
  width: 100%;
  font-family: arial;
  line-height: 30px;
  height: 30px;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #e8e8e8;
}
.popup-result-scroll {
  font-size: 12px;
  line-height: 24px;
  height: 10em;
  overflow-y: auto;
}
</style>
